<template>
  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客户信息</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card class="box-card">
      <el-row :gutter="40">
        <el-col :span="9">
          <el-input
            placeholder="请输入"
            clearable
            v-model="queryTxt"
            @change="getPeoList"
            @clear="getPeoList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getPeoList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true"
            >添加客户</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-row>
      <el-table :data="peoList" stripe border size="limit">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="电话 " prop="tele"></el-table-column>
        <el-table-column label="等级 " prop="number"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="修改客户信息"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="showEditDialog(scope.row)"
              ></el-button>

            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除此客户"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deletePeos(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    
    <el-dialog
      title="添加客户"
      :visible.sync="addDialogVisible"
      width="30%"
      @close="addDialogClosed"
    >
      <el-form ref="addFormRef" :model="peo" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="peo.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tele">
          <el-input v-model="peo.tele"></el-input>
        </el-form-item>
        <el-form-item label="等级" prop="number">
          <el-input v-model="peo.number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  
    <el-dialog
      title="客户信息修改"
      :visible.sync="editDialogVisible"
      width="30%"
      @close="editDialogClosed"
    >
      <el-form ref="editFormRef" :model="editpeo" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editpeo.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tele">
          <el-input v-model="editpeo.tele"></el-input>
        </el-form-item>
        <el-form-item label="等级" prop="number">
          <el-input v-model="editpeo.number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editInfo()">确 定</el-button>
      </span>
    </el-dialog>

    <el-card>
      <el-row>
        <el-pagination
          background
          layout="prev, pager, next,total,sizes,jumper"
          :total="totalCount"
          :page-size="limit"
          :page-sizes="[6, 9, 12]"
          :current-page="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-chick="handlePrev"
          @next-click="handleNext"
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editpeo: {},
      peoList: [],
      queryTxt: "",
      peo: {},
      editDialogVisible: false,
      addDialogVisible: false,
      limit: 6,
      page: 1,
      totalCount: 0,
    };
  },
  created() {
    this.getPeoList();
  },
  methods: {
    getPeoList() {
      let url = `peomessages?_page=${this.page}&_limit=${this.limit}`;
      if (this.queryTxt) {
        url = `peomessages?_page=${this.page}&_limit=${this.limit}&q=${this.queryTxt}`;
      }
      this.$http.get(url).then((res) => {
        this.peoList = res.data;
        this.totalCount = parseInt(res.headers["x-total-count"]);
      });
    },
    add() {
      this.$refs.addFormRef.validate((valid) => {
        console.log("1111111111");
        if (!valid) return false;
        this.$http.post("peomessages", this.peo).then((res) => {
          if (res.status !== 201) {
            this.$message.error("客户添加失败...");
          } else {
            this.$message.success("客户添加成功");
          }
          this.addDialogVisible = false;
          this.getPeoList();
        });
      });
    },
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    deletePeos(row) {
      this.editpeo = row;
      this.$confirm("是否确认删除该客户?", "删除该客户", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete(`peomessages/${this.editpeo.id}`);
          this.getPeoList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getPeoList();
        })
        .catch(() => {
          this.getPeoList();
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editInfo() {
      this.$refs.editFormRef.validate((valid) => {
        if (!valid) return false;
        this.$http
          .put(`peomessages/${this.editpeo.id}`, this.editpeo)
          .then((res) => {
            if (res.status === 201) {
              this.$message.error("用户修改失败...");
            } else {
              this.$message.success("用户修改成功");
            }
            this.editDialogVisible = false;
            this.getPeoList();
          });
      });
    },
    showEditDialog(row) {
      this.editpeo = row;
      this.editDialogVisible = true;
    },

    handleSizeChange(size) {
      this.limit = size;
      this.getPeoList();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getPeoList();
    },
    handlePrev(page) {
      this.page = page;
      this.getPeoList();
    },
    handleNext(page) {
      this.page = page;
      this.getPeoList();
    },
  },
};
</script>

<style>
.el-breadcrumb {
  margin: 20px 0;
}
.el-breadcrumb-item {
  cursor: pointer;
}
.box-card {
  padding-bottom: 20px;
}
button {
  margin-left: 30px;
}
</style>